<template>
  <div>
    <div v-if="screenWidth > 1000">
      <div class="footer pc">
        <div class="address-wrap">
          <div class="address-box">
            <div class="address-list">
              <img src="@/assets/img/01.png" alt="">
              <p>鼓楼咨询中心: 西安市西大街45号西安市旅游信息咨询中心</p>
            </div>
            <div class="address-list">
              <img src="@/assets/img/02.png" alt="">
              <p>火车站站点: 西安市新城区火车站西广场城墙洞内旅客服务大厅</p>
            </div>
            <div class="address-list">
              <img src="@/assets/img/03.png" alt="">
              <p>大雁塔咨询站点：西安市雁塔区大雁塔北广场喷泉东侧西安市民游客服务中心</p>
            </div>
            <div class="address-list">
              <img src="@/assets/img/04.png" alt="">
              <p>城南咨询站点：城南客运站南侧游客集散中心内</p>
            </div>
          </div>
        </div>
        <div class="link-wrap">
          <div class="link-box">
            <div class="play public-wrap">
              <p class="title" @click="goPage('/play-xian')">玩转西安</p>
              <div class="play-box public-box">
                <div class="left">
                  <p @click="goPage('/food-list')"> 美食推荐 </p>
                  <p @click="goPage('/hotel-list')"> 酒店信息 </p>
                  <p @click="goPage('/scenic-list')"> 旅游景区 </p>
                  <p @click="goPage('/shopping-list')"> 休闲购物 </p>
                </div>
              </div>
            </div>
            <div class="culture public-wrap">
              <p class="title" @click="goPage('/culture-xian')">文化西安</p>
              <div class="culture-box public-box">
                <div class="left">
                  <p @click="goPage('/survey-details', 49)"> 西安简介 </p>
                  <p @click="goPage('/survey-details', 50)"> 历史沿革 </p>
                  <p @click="goPage('/survey-details', 51)"> 地理环境 </p>
                  <p @click="goPage('/survey-details', 52)"> 行政区划 </p>
                  <p @click="goPage('/survey-details', 53)"> 西安文化 </p>
                  <p @click="goPage('/survey-details', 54)"> 标识西安 </p>
                </div>
              </div>
            </div>
            <div class="serve public-wrap">
              <p class="title" @click="goPage('/serve-you')">旅游咨询</p>
              <div class="serve-box public-box">
                <div class="left">
                  <p @click="goPage('/travel-agency-list')">旅行社查询</p>
                  <p @click="goPage('/travel-consultation-list')">旅游咨询</p>
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="phone public-wrap">
              <p class="title">客服热线</p>
              <div class="phone-box public-box">
                <div class="left">
                  <p>029-87368555</p>
                  <p>029-87360777</p>
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="complaint public-wrap">
              <p class="title">旅游投诉</p>
              <div class="phone-box public-box">
                <div class="left">
                  <p>029-12345</p>
                </div>
              </div>
            </div>
            <div class="medium public-wrap">
              <p class="title">媒体矩阵</p>
              <div class="medium-box public-box">
                <div class="wechat"><i class="l-iconfont">&#xe601;</i>
                  <div class="select-box"><img src="@/assets/img/wx.jpg" alt=""></div>
                </div>
                <div class="weibo"><i class="l-iconfont">&#xe600;</i>
                  <div class="select-box"><img src="@/assets/img/wb.png" alt=""></div>
                </div>
                <div class="douyin"><i class="l-iconfont">&#xe620;</i>
                  <div class="select-box"><img src="@/assets/img/dy.png" alt=""></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="information">
          <span class="text">Copyright © 2023</span>
          <span class="text">西安市旅游信息咨询中心</span>
          <span class="text"> All Rights Reserved.</span>
          <span class="text">
            备案号： <span>陕ICP备20002730号</span></span>
        </div>
      </div>
    </div>
    <div class="rightSize-box">
      <ul class="right-side-list">
        <li class="consult" @click="goPage('/serve-you')">
          <i class="l-iconfont">&#xe630;</i>
        </li>
        <li :class="{ 'top-item': true, isShowTop: showTop }" @click="goTop">
          <div class="to-top">
            <img src="@/assets/img/fire.png" alt="">
          </div>
          <div class="to-top-hover">
            <img src="@/assets/img/fire.png" alt="">
          </div>
        </li>
      </ul>
    </div>
    <div class="h5" v-if="screenWidth <= 1000">
      <div class="address-wrap">
        <div class="address-box">
          <div class="address-list">
            <p>鼓楼咨询中心: 西安市西大街45号西安市旅游信息咨询中心</p>
          </div>
          <div class="address-list">
            <p>火车站站点: 西安市新城区火车站西广场城墙洞内旅客服务大厅</p>
          </div>
          <div class="address-list">
            <p>大雁塔咨询站点：西安市雁塔区大雁塔北广场喷泉东侧西安市民游客服务中心</p>
          </div>
          <div class="address-list">
            <p>城南咨询站点：城南客运站南侧游客集散中心内</p>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="text-wrap">
        <div class="text-box"><span>客服热线：029-87368555 029-87360777</span><span class="ml">旅游投诉：029-12345</span></div>
        <div class="text-box"><span>COPYRIGHT © 2023 西安市旅游信息咨询中心 ALL RIGHTS
            RESERVED.</span></div>
        <div class="text-box"><span>备案号：陕ICP备20002730号</span></div>
        <div class="text-box"><span>技术支持：成都中科大旗软件股份有限公司</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterS', // 组件名称
  data() {
    return {
      showTop: false,
    };
  },
  props: {

  },
  created() {
    this.scrollTop = window.scrollY
    if (this.scrollTop > 100) {
      this.showTop = true
    }
  },
  methods: {
    goPage(url, id) {
      if (!id) {
        if (this.$route.path == url) {
          return
        } else {
          this.$router.push({
            path: url,

          })
        }
      } else {
        if (this.$route.query.id != id) {
          this.$router.push({
            path: url,
            query: {
              id: id,
            },
          })
        }

      }

    },
    handleScroll() {
      if (window.scrollY > 100) {
        this.showTop = true
      } else {
        this.showTop = false  // 隐藏返回顶部按钮
      }
    },
    goTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
  },
  computed: {
    screenWidth() {
      return this.$store.getters.screenWidth
    }
  },
  watch: {
    // 监听器
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scoped>
@import "@/assets/css/footer.css";

/* 样式 */
.h5 {
  width: 7.5rem;
  height: 4.8rem;
  background: #020914;
  padding: 0;
  display: block;
}

.h5 .address-wrap {
  color: #b9b9b9;
  font-size: 0.24rem;
  padding-top: 0.56rem;
  text-align: center;
}

.h5 .line {
  width: 7.5rem;
  height: 1px;
  background-color: #2f2f2f;
  margin: 0.38rem 0 0.5rem;
}

.h5 .text-wrap {
  color: #999;
  font-size: 0.2rem;
  text-align: center;
}

.h5 .text-wrap .text-box {
  margin-bottom: 0.1rem;
}

.h5 .text-wrap .text-box .ml {
  margin-left: 0.3rem;
}
</style>